<template>
	<view class="search-box">
		<view class="icon">
			<image src="../static/icon/search.png"></image>
		</view>
		<input @blur="handleBlur" @focus="handleFocus" :value="value" @input="onInput" type="text" class="search-input" placeholder="请输入小区名称筛选">
		<view v-if="showClearIcon && isFocus" @click="clearInput" class="clear-icon">x</view>
	</view>
</template>

<script>
	export default {
		props: {
			value: {
				type: String
			}
		},
		name: "searchInput",
		data() {
			return {
				isFocus: false
			};
		},
		computed: {
			showClearIcon() {
				return this.value
			}
		},
		methods: {
			handleFocus() {
				this.isFocus = true
			},
			onInput(e) {
				console.log(e)
				this.$emit('input', e.target.value)
			},
			clearInput() {
				console.log('触发了?')
				this.$emit('input', '')
			}
		}
	}
</script>

<style lang="scss">
	.search-box {
		position: relative;
		width: 560rpx;
		height: 56rpx;
		margin: 0 30rpx;
		padding-left: 17rpx;
		padding-right: 18rpx;
		// background-color: pink;
		border: 2rpx solid #595959;
		border-radius: 28rpx;
		display: flex;
	
		.icon {
			width: 50rpx;
			height: 46rpx;
			margin-top: 3rpx;
			image {
				width: 100%;
				height: 100%;
			}
		}
	
		.search-input {
			width: 434rpx;
			height: 100%;
			color: #999;
		}
	
		.pop {
			position: absolute;
			right: 60rpx;
		}
		.clear-icon {
			position: absolute;
			right: 12rpx;
			width: 42rpx;
			height: 42rpx;
			color: #fff;
			border-radius: 50%;
			line-height: 40rpx;
			text-align: center;
			margin-top: 4rpx;
			// align-items: center;
			// position: absolute;
			// right: 130rpx;
			// top: 24rpx;
			background-color: #c8c9cc;
		}
	}
	
</style>
